<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: deeppink;
				/* animation: name duration timing-function delay iteration-count direction fill-mode; */
				animation-name: move;
				/* 动画的名字 */
				animation-duration: 3s;
				/* 动画的执行时间 */
				animation-timing-function: linear;
				/* 匀速 */
				/* animation-delay: 2s; */
				/* 动画的延迟时间 */
				/* animation-iteration-count: 3; */
				 /* animation-iteration-count: infinite; */
				/* 无限循环 */
				/* animation-direction: reverse; */
				/* animation-direction: alternate; */
				animation-fill-mode: forwards;
			}
			@keyframes move {
				/* form{
					transform: translate(0,0);
				}
				to{
					transform: translateX(600px);
				} */
				/* 0%{
					transform: translate(0,0);
				}
				100%{
					transform: translateX(600px);
				} */
				0%{
					transform: translate(0,0);
				}
				25%{
					transform: translateX(400px) rotate(180deg);
					background-color: green;
				}
				50%{
					transform: translate(300px,400px);
				}
				75%{
					transform: translate(200px,400px);
				}
				100%{
					transform: translate(0,0);
				}
			}
			.box:hover{
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div class="box"> </div>
	</body>
</html>